<template>
  <div>
    <div style="display:flex">
      <div id="container"></div>
      <div class="tab">
        <!-- 标签页组件 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风景" name="first">
            <ul class="infinite-list" v-for="(item,index) of sceneryList" :key="index">
              <li
                class="infinite-list-item"
                v-if="item.type.indexOf('风景名胜') > -1 "
                @mouseover="showPoi(item)"
              >
                <span class="title">{{item.name}}</span>
                <span class="distance">{{item.distance}}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="交通" name="second">
            <ul
              class="infinite-list"
              v-for="(item,index) of platformList"
              :key="index"
              @mouseover="showPoi(item)"
            >
              <li
                class="infinite-list-item"
                v-if="item.type.indexOf('交通设施服务') > -1 "
                @mouseover="showPoi(item)"
              >
                <span class="title">{{item.name}}</span>
                <span class="distance">{{item.distance}}</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      sceneryList: [],
      platformList: [],
      map: null
    };
  },
  props: ["datalist"],
  mounted() {
    console.log("传进来的数据datalist", this.datalist);
    this.init();
    this.getSceneryAddress();
  },
  methods: {
    handleClick(tab, event) {
      console.log("tab信息", tab);
      console.log("event信息", event);
      console.log(this.activeName);
      //风景
      if (this.activeName == "first") {
        this.getSceneryAddress();
      }
      //交通
      if (this.activeName == "second") {
        this.getPlatformAddress();
      }
    },
    getSceneryAddress() {
      this.$axios({
        url: "https://restapi.amap.com/v3/place/text",
        params: {
          key: "541784d3abf0db4b0f5bf69ab21e29e7",
          location:
            this.datalist.location.longitude +
            "," +
            this.datalist.location.latitude,
          keyword: "",
          city: this.datalist.real_city,
          types: "风景"
        }
      }).then(res => {
        //  计算距离
        console.log("res风景数据", res);
        res.data.pois.forEach((item, index) => {
          var p1 = [
            this.datalist.location.longitude,
            this.datalist.location.latitude
          ];
          var p2 = [...item.location.split(",")];
          //  计算两点之间的距离，单位是米
          let dis = AMap.GeometryUtil.distance(p1, p2);
          // 换算成公里 ，1公里=1000米
          dis = (dis / 1000).toFixed(2) + "公里";
          item.distance = dis;
        });
        this.sceneryList = res.data.pois;
        // this.datalisthandle(this.sceneryList);
        this.setMarkers(this.sceneryList);
        console.log("风景", res.data.pois);
      });
    },
    getPlatformAddress() {
      this.$axios({
        url: "https://restapi.amap.com/v3/place/text",
        params: {
          key: "541784d3abf0db4b0f5bf69ab21e29e7",
          location:
            this.datalist.location.longitude +
            "," +
            this.datalist.location.latitude,
          keyword: "",
          city: this.datalist.real_city,
          types: "交通"
        }
      }).then(res => {
        //  计算两点之间的距离
        res.data.pois.forEach((item, index) => {
          // 酒店坐标
          var p1 = [
            this.datalist.location.longitude,
            this.datalist.location.latitude
          ];
          var p2 = [...item.location.split(",")];
          let dis = AMap.GeometryUtil.distance(p1, p2);
          //  单位换算
          dis = (dis / 1000).toFixed(2) + "公里";
          item.distance = dis;
        });
        this.platformList = res.data.pois;
        //将酒店的数据推进platformList
        // this.datalisthandle(this.platformList);
        this.setMarkers(this.platformList);
        console.log("交通", res.data.pois);
      });
    },
    datalisthandle(args) {
      if (this.datalist.location instanceof Object) {
        this.datalist.location = `${this.datalist.location.longitude},${this.datalist.location.latitude}`;
        // this.datalist.location = Object.values(this.datalist.location).join(",");
        args.push(this.datalist);
      }
      console.log("location", this.datalist.location);
      // console.log("location", this.datalist);
    },
    init() {
      // 生成地图.container是显示地图的div的id
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [
          this.datalist.location.longitude,
          this.datalist.location.latitude
        ], //中心点坐标
        zoom: 11, //放大级别
        viewMode: "3D" //使用3D视图
      });
      // //页面一加载就获取风景的数据和定位
      // var marker = this.setMarkers(this.sceneryList);
      // if (!this.datalist) {
      //   if (marker) {
      //     marker.setMap(null);
      //     marker = null;
      //   }
      //   return;
      // } else {
      //   if (marker) {
      //     // this.map.clearMap();
      //     this.map.add(marker); //添加到地图
      //     // this.map.setFitView();
      //     // 自动匹配位置
      //   }
      // }
    },
    setMarkers(argList = []) {
      const markers = argList.map((element, index) => {
        const marker = new AMap.Marker({
          title: element.name,
          position: new AMap.LngLat(...element.location.split(",")),
          //标记id
          exData: element.id
        });
        // 添加鼠标悬停事件
        marker.on("mouseover", () => {
          return this.showPoi(element);
        });
        return marker;
      });
      // 先清除标记
      this.map.clearMap();
      this.map.add(markers);
      // 自动匹配显示位置
      this.map.setFitView();
    },
    showPoi(item) {
      // 1.拿到所有的点
      const markers = this.map.getAllOverlays("marker");

      // 2.遍历
      markers.forEach(marker => {
        // 通过高德的一个属性给每个 marker 添加id
        if (marker.getExtData() == item.id) {
          // 点的 id 等于传进来的对象 id

          // 将匹配的点标记移动到顶部
          marker.setTop(true);

          // 附加显示一个弹窗
          const infoWindow = new AMap.InfoWindow({
            content: `<span>${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(-5, -30)
          });
          infoWindow.open(this.map, marker.getPosition());

          // 将这个点居中
          this.map.setCenter(marker.getPosition());
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  width: 650px;
  height: 360px;
  margin: 40px 0;
}
/deep/ .amap-markers {
  .amap-marker {
    top: 0;
    left: 0;
    .custom-content-marker {
      position: relative;
      width: 22px;
      height: 36px;
      img {
        width: 44px;
      }
      .num {
        position: absolute;
        top: 28px;
        right: -90px;
        display: inline-block;
        width: 22px;
        height: 36px;
        text-align: center;
        line-height: 24px;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}

.tab {
  width: 330px;
  height: 360px;
  margin: 30px 0 0 20px;
  /deep/ .el-tabs__content {
    height: 320px;
    overflow-y: scroll;
    .infinite-list-item {
      display: flex;

      margin: 0 20px 22px 10px;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      .title {
        flex: 1;
      }
    }
  }
}
</style>

